<template>
  <div class="registerView">
    <div class="userInfo">
      <h3 class="title">忘记密码</h3>
      <div class="userMsg">
        <span>账&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
        <el-input v-model="zhtxt" placeholder="请输入账号" type="text" @blur="zhBlur"></el-input>
      </div>
      <div class="zhhelp" ref="zhRef">账号不能为空</div>
      <div class="userMsg">
        <span>密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
        <el-input v-model="mmtxt" placeholder="请输入密码" type="password" @blur="mmBlur"></el-input>
      </div>
      <div class="mmhelp" ref="mmRef">密码不能为空</div>
      <div class="question">
        <span>问题一：{{question1}}</span>
      </div>
      <div class="userMsg">
        <span style="visibility: hidden">问题一：</span>
        <el-input v-model="wtytxt" placeholder="请输入密保答案" type="text" @blur="wtyBlur"></el-input>
      </div>
      <div class="wtyhelp" ref="wtyRef">密保问题不能为空</div>
      <div class="question">
        <span>问题二：{{question2}}</span>
      </div>
      <div class="userMsg">
        <span style="visibility: hidden">问题二：</span>
        <el-input v-model="wtetxt" placeholder="请输入密保答案" type="text" @blur="wteBlur"></el-input>
      </div>
      <div class="wtehelp" ref="wteRef">密保问题不能为空</div>
      <div class="question">
        <span>问题三：{{question3}}</span>
      </div>
      <div class="userMsg">
        <span style="visibility: hidden">问题三：</span>
        <el-input v-model="wtstxt" placeholder="请输入密保答案" type="text" @blur="wtsBlur"></el-input>
      </div>
      <div class="wtshelp" ref="wtsRef">密保问题不能为空</div>
      <div class="loginBtn">
        <el-button type="primary" @click="handleRegister()">修改密码</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as sysTool from '../../../js/systemTool'
export default {
  name: 'Password',
  // 实例的数据对象
  data () {
    return {
      ip: '1.1.1.1',
      area: '北京市',
      brower: 'chrome',
      os: 'windows7',
      result: null,
      question1: '',
      question2: '',
      question3: '',
      zhtxt: '',
      mmtxt: '',
      wtytxt: '',
      wtetxt: '',
      wtstxt: ''
    }
  },
  // created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  created () {
    var zh = this.$route.params.username
    if (zh !== '' && zh !== null) {
      this.zhtxt = zh
    }
  },
  // 方法
  methods: {
    // 进入页面时获取要登录验证的参数项 密保
    reqRegister () {
      var data = {
        Method: 'ReqRegister'
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      var url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        this.result = res.data.Data
        this.question1 = this.result[0].Question
        this.question2 = this.result[1].Question
        this.question3 = this.result[2].Question
      }).catch(error => {
        console.log(error)
        this.$message.error('验证问题失败，请联系管理员！')
      })
    },
    // 点击注册按钮
    handleRegister () {
      // 账号注册校验
      if (this.zhtxt === '') {
        this.$refs.zhRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '账号不能为空'
        })
        return false
      }
      if (this.zhtxt.length < 6) {
        this.$message({
          type: 'error',
          message: '账号最小长度为6位'
        })
        return false
      }
      // 密码注册校验
      if (this.mmtxt === '') {
        this.$refs.mmRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '密码不能为空'
        })
        return false
      }
      if (this.mmtxt.length < 6) {
        this.$message({
          type: 'error',
          message: '密码最小长度为6位'
        })
        return false
      }

      // 密保注册校验
      if (this.wtytxt === '') {
        this.$refs.zhRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '问题一不能为空'
        })
        return false
      }
      // 密保注册校验
      if (this.wtetxt === '') {
        this.$refs.wteRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '问题二不能为空'
        })
        return false
      }
      // 密保注册校验
      if (this.wtstxt === '') {
        this.$refs.wtsRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '问题三不能为空'
        })
        return false
      }

      // 注册按钮等待效果初始化
      const loading = this.$loading({
        lock: true,
        text: '注册成功，请登录...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      // 请求接口
      setTimeout(() => {
        // 获取本机信息
        this.ip = sessionStorage.getItem('ip')
        this.area = sessionStorage.getItem('area')
        this.brower = sysTool.GetCurrentBrowser()
        this.os = sysTool.GetOs()
        console.log('ip，地区，浏览器，操作系统，：', this.ip, this.area, this.brower, this.os)
        var data = {
          Method: 'ForgotPassword',
          Name: this.zhtxt,
          Password: this.mmtxt,
          Device_ID: this.brower,
          Platform: this.os,
          Answer1: this.wtytxt,
          Answer2: this.wtetxt,
          Answer3: this.wtstxt
        }
        var msg = JSON.stringify(data)
        var data2 = new FormData()
        data2.append('content', msg)
        var url = 'api/member/forgotpassword.php'
        this.axios.post(url, data2).then((res) => {
          // 修改成功返回登录页
          if (res.data.Result === 'OK') {
            this.$router.push('/login')
          } else {
            this.$message({
              message: res.data.Message,
              type: 'warning'
            })
          }
        }).catch(error => {
          this.$message.error('修改失败,请联系管理员')
          console.log(error)
        })
        loading.close()
      }, 2000)
    },
    // 账号失去焦点
    zhBlur () {
      if (this.zhtxt.length === 0) {
        this.$refs.zhRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.zhRef.style.visibility = 'hidden'
      }
      if (this.zhtxt.length >= 6) {
        this.$refs.zhRef.style.visibility = 'hidden'
      } else {
        this.$refs.zhRef.innerHTML = '账号最小长度为6位'
        this.$refs.zhRef.style.visibility = 'visible'
      }
    },
    // 密码失去焦点
    mmBlur () {
      if (this.mmtxt === '') {
        this.$refs.mmRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.mmRef.style.visibility = 'hidden'
      }
      if (this.mmtxt.length >= 6) {
        this.$refs.mmRef.style.visibility = 'hidden'
      } else {
        this.$refs.mmRef.innerHTML = '密码最小长度为6位'
        this.$refs.mmRef.style.visibility = 'visible'
      }
    },
    // 问题失去焦点
    wtyBlur () {
      if (this.wtytxt === '') {
        this.$refs.wtyRef.style.visibility = 'visible'
      } else {
        this.$refs.wtyRef.style.visibility = 'hidden'
      }
    },
    // 问题失去焦点
    wteBlur () {
      if (this.wtetxt === '') {
        this.$refs.wteRef.style.visibility = 'visible'
      } else {
        this.$refs.wteRef.style.visibility = 'hidden'
      }
    },
    // 问题失去焦点
    wtsBlur () {
      if (this.wtstxt === '') {
        this.$refs.wtsRef.style.visibility = 'visible'
      } else {
        this.$refs.wtsRef.style.visibility = 'hidden'
      }
    }
  },
  // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
  mounted () {
    this.reqRegister()
  },
  // 侦听器，监测Vue实例上的数据变动
  watch: {

  }
}
</script>

<style scoped>
.registerView {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  background: #fff;
  box-shadow: 0 0 25px #cac6c6;
  border-radius: 5px;
  border: 1px solid #eaeaea;
}
.title {
  margin-bottom: 30px;
}
.userInfo {
  position: relative;
  width: 550px;
  padding: 35px;
}
.userMsg {
  display: flex;
  font-size: 14px;
  height: 35px;
  margin-bottom: 10px;
}
.userMsg span {
  line-height: 35px;
  margin-right: 10px;
}
.userMsg .el-input {
  flex: 1;
}
.question {
  height: 30px;
}
.loginBtn {
  display: flex;
  justify-content: center;
}
.loginBtn .el-button {
  width: 419px;
}
.zhhelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.mmhelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.wtyhelp {
  position: relative;
  top: -5px;
  left: 67px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.wtehelp {
  position: relative;
  top: -5px;
  left: 67px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.wtshelp {
  position: relative;
  top: -5px;
  left: 67px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
</style>
